<template>
  <Form v-if="hierObject.hierProperties.properties" :model="data" :label-width="90" label-position="right">
      <Row >
        <Col v-for="(item,index) in fieldList" :key="index" :span="item.span || 24">
          <FieldItem
            v-model="data[item.key]" :config="item.config"
            :formItemProps="{label: item.title, labelWidth: item.labelWidth, prop: item.key, }"
          />
        </Col>
        <template v-if="this.hierObject.hasProperties">
          <Col v-if="!isInstance" :span="24" class="propertyWp">
            <Alert style="margin: 0">{{ $t(`model.modelProperties`)}}</Alert>
            <cfgModelPropertyNoGroup ref="_properties" v-model="data.properties" :featuresHaveCode="true"/>
            <!-- <Alert style="margin: 0">{{ $t(`model.modelStatusProperties`)}}</Alert>
            <cfg-modelStatusProperty v-model="data.statusProperties"/> -->
          </Col>
          <template v-else>
            <FormItem v-for="(item, index) in modelFieldList" :key="index" :prop="item.key" :label="item.title">
              <field-cell :config="item.config" v-model="hierObject.hierProperties.values[item.key]" />
            </FormItem>
          </template>
        </template>
      </Row>
  </Form>
</template>

<script>
import hierUtil from './util'
export default {
  name: "cfgHierList",
  data() {
    return {
    }
  },
  props: {
    hierObject: {
      default() {
        return null
      }
    },
    modelFieldList: {
      default() {
        return []
      }
    },
    isInstance: {
      default: false
    },
    // drawer: {
    //   default: () => {
    //     return {
    //       status: 'edit', // new edit read
    //       show: true,
    //     };
    //   }
    // },
  },
  methods: {
    checkValues() {
      return this.$refs._properties.checkValues()
    },
  },
  // watch: {
  //   'drawer.show'(val) {
  //     if (val) {
  //       console.log('drawer.show',this.isInstance);
  //     }
  //   }
  // },
  computed: {
    data() {
      // console.log("🚀 ~ file: cfgHierList.vue:27 coputed-data", this.hierObject)
      return this.hierObject && this.hierObject.hierProperties ? this.hierObject.hierProperties : {};
    },
    fieldList() {
        return hierUtil.fieldList(this.G_Locale)
    },
  },
}
</script>
